export const projectsData = [
  {
    id: 1,
    title: '电商管理系统',
    description: '基于 Vue 3 和 Element Plus 开发的电商后台管理系统，包含商品管理、订单管理、用户管理等功能。',
    image: 'https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=800&h=450&fit=crop',
    tags: ['Vue 3', 'Element Plus', 'Axios', 'ECharts'],
    category: 'web',
    featured: true,
    demoUrl: 'https://demo.example.com',
    githubUrl: 'https://github.com/yourusername/project1',
    date: '2024-01',
    status: '已上线',
    teamSize: '个人项目',
    role: '全栈开发',
    duration: '3个月',
    details: {
      overview: `这是一个功能完善的电商后台管理系统，为中小型电商企业提供全面的商品、订单、用户管理解决方案。
      系统采用前后端分离架构，前端使用 Vue 3 + Element Plus 构建现代化管理界面，
      后端使用 Node.js + Express 提供 RESTful API 服务。项目注重用户体验和性能优化，
      实现了大数据量下的高效渲染和流畅交互。`,
      
      challenges: [
        '大量数据的高效渲染：商品列表可能包含数万条数据，需要优化渲染性能',
        '复杂的权限管理：需要支持多角色、细粒度的权限控制',
        '实时数据更新：订单状态需要实时推送给管理员',
        '数据可视化性能：大量图表同时渲染时的性能优化'
      ],
      
      solutions: [
        '使用虚拟滚动技术（virtual-scroll）处理长列表，只渲染可视区域的数据',
        '实现基于 RBAC 的权限系统，使用路由守卫和指令进行权限控制',
        '集成 WebSocket 实现订单实时通知功能',
        '按需加载图表组件，使用懒加载优化首屏加载速度'
      ],
      
      features: [
        '🔐 用户权限管理：支持多角色（管理员、运营、客服）的细粒度权限控制',
        '📦 商品管理：商品 CRUD、批量导入导出、库存预警、分类管理',
        '📋 订单管理：订单列表、状态跟踪、发货管理、退款处理',
        '📊 数据可视化：销售数据统计、用户行为分析、多维度报表展示',
        '🔔 实时通知：新订单提醒、库存预警、系统消息实时推送',
        '📤 数据导出：支持 Excel、CSV、PDF 等多种格式的数据导出',
        '🔍 高级搜索：支持多条件组合搜索和筛选',
        '📱 响应式设计：完美适配桌面端和平板设备'
      ],
      
      technologies: [
        { name: 'Vue 3', purpose: '前端框架，使用 Composition API' },
        { name: 'Vite', purpose: '构建工具，提供快速的开发体验' },
        { name: 'Element Plus', purpose: 'UI 组件库，提供丰富的后台组件' },
        { name: 'Pinia', purpose: '状态管理，管理全局状态' },
        { name: 'Axios', purpose: 'HTTP 客户端，处理 API 请求' },
        { name: 'ECharts', purpose: '数据可视化库，展示统计图表' },
        { name: 'WebSocket', purpose: '实时通信，推送订单通知' }
      ],
      
      screenshots: [
        {
          url: 'https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=1200&h=675&fit=crop',
          title: '数据仪表盘',
          description: '展示销售数据、订单统计、用户增长等关键指标'
        },
        {
          url: 'https://images.unsplash.com/photo-1551434678-e076c223a692?w=1200&h=675&fit=crop',
          title: '商品管理',
          description: '商品列表、编辑、批量操作等功能界面'
        }
      ],
      
      achievements: [
        '✅ 系统上线后，商品管理效率提升 60%，减少人工操作时间',
        '✅ 页面加载速度优化至 1.2s 以内，用户体验显著提升',
        '✅ 支持 10 万+ 商品数据的流畅操作，满足大型电商需求',
        '✅ 获得客户高度评价，续签率达 100%'
      ]
    }
  },
  {
    id: 2,
    title: '个人博客系统',
    description: '使用 Vue 3 + Vite 构建的个人博客，支持 Markdown 编辑，代码高亮，评论功能。',
    image: 'https://images.unsplash.com/photo-1499750310107-5fef28a66643?w=800&h=450&fit=crop',
    tags: ['Vue 3', 'Vite', 'Markdown', 'Node.js'],
    category: 'web',
    featured: true,
    demoUrl: 'https://blog.example.com',
    githubUrl: 'https://github.com/yourusername/project2',
    date: '2023-11',
    status: '持续维护',
    teamSize: '个人项目',
    role: '全栈开发',
    duration: '2个月',
    details: {
      overview: `一个功能丰富、界面优雅的个人博客系统，专为技术博主设计。
      支持 Markdown 写作、代码高亮、文章分类、标签管理、评论互动等功能。
      项目注重阅读体验，采用响应式设计，提供深色模式，并进行了 SEO 优化，
      确保文章能够被搜索引擎良好收录。`,
      
      challenges: [
        'Markdown 解析性能：长文章的实时预览需要优化性能',
        '代码高亮主题：需要支持多种编程语言和主题切换',
        'SEO 优化：单页应用的 SEO 优化挑战',
        '评论防spam：需要有效防止垃圾评论'
      ],
      
      solutions: [
        '使用 Worker 在后台解析 Markdown，避免阻塞主线程',
        '集成 Prism.js 实现多语言代码高亮，支持主题自定义',
        '使用服务端渲染（SSR）或预渲染技术优化 SEO',
        '实现评论审核机制和简单的验证码系统'
      ],
      
      features: [
        '✍️ Markdown 编辑器：支持实时预览、快捷键、图片上传',
        '🎨 代码高亮：支持 50+ 编程语言的语法高亮',
        '📁 文章管理：分类、标签、草稿、发布等完整流程',
        '💬 评论系统：支持嵌套评论、Emoji、Markdown 格式',
        '🔍 全文搜索：基于标题、内容、标签的快速搜索',
        '📡 RSS 订阅：提供 RSS/Atom 订阅功能',
        '🌙 深色模式：自动检测系统主题或手动切换',
        '🚀 SEO 优化：完整的 meta 标签和结构化数据',
        '📱 响应式设计：完美适配手机、平板、桌面设备'
      ],
      
      technologies: [
        { name: 'Vue 3', purpose: '前端框架，构建用户界面' },
        { name: 'Vite', purpose: '构建工具，提供极速开发体验' },
        { name: 'Express', purpose: '后端框架，提供 API 服务' },
        { name: 'MongoDB', purpose: 'NoSQL 数据库，存储文章数据' },
        { name: 'Marked', purpose: 'Markdown 解析器' },
        { name: 'Prism.js', purpose: '代码语法高亮库' }
      ],
      
      screenshots: [
        {
          url: 'https://images.unsplash.com/photo-1499750310107-5fef28a66643?w=1200&h=675&fit=crop',
          title: '博客首页',
          description: '展示文章列表、分类导航和推荐文章'
        }
      ],
      
      achievements: [
        '✅ 累计发布技术文章 50+ 篇，总阅读量超过 10 万',
        '✅ 页面加载速度 < 1s，Lighthouse 性能评分 95+',
        '✅ 支持离线阅读，提供 PWA 渐进式 Web 应用体验',
        '✅ SEO 优化后，搜索引擎收录率达 100%'
      ]
    }
  },
  {
    id: 3,
    title: 'Todo 应用',
    description: '一个简洁优雅的待办事项应用，支持任务分类、优先级设置、提醒功能。',
    image: 'https://images.unsplash.com/photo-1484480974693-6ca0a78fb36b?w=800&h=450&fit=crop',
    tags: ['Vue 3', 'Pinia', 'LocalStorage', 'PWA'],
    category: 'app',
    featured: false,
    demoUrl: 'https://todo.example.com',
    githubUrl: 'https://github.com/yourusername/project3',
    date: '2023-09',
    status: '已完成',
    teamSize: '个人项目',
    role: '前端开发',
    duration: '2周',
    details: {
      overview: `一个功能齐全的待办事项管理应用，采用极简设计风格，注重用户体验。
      支持任务创建、分类、优先级设置、截止日期提醒等功能。
      数据保存在本地浏览器，支持 PWA 离线使用，可以像原生应用一样安装到桌面。`,
      
      challenges: [
        '数据持久化：需要可靠的本地存储方案',
        '状态同步：多个标签页之间的数据同步',
        '用户体验：简洁的界面下保持功能完整性'
      ],
      
      solutions: [
        '使用 LocalStorage 配合 Pinia 持久化插件实现数据保存',
        '使用 Storage 事件监听实现跨标签页数据同步',
        '采用渐进式设计，核心功能突出，高级功能隐藏在菜单中'
      ],
      
      features: [
        '✅ 任务管理：快速创建、编辑、删除任务',
        '📂 分类标签：自定义分类和标签，灵活组织任务',
        '⭐ 优先级：三级优先级标识（高、中、低）',
        '⏰ 提醒功能：设置截止日期和提醒时间',
        '🔍 搜索筛选：按关键词、分类、状态快速查找任务',
        '💾 数据持久化：本地存储，数据永不丢失',
        '📱 PWA 支持：可离线使用，支持桌面安装',
        '🌗 深色模式：自动适配系统主题'
      ],
      
      technologies: [
        { name: 'Vue 3', purpose: '前端框架' },
        { name: 'Pinia', purpose: '状态管理' },
        { name: 'Vite', purpose: '构建工具' },
        { name: 'Vite PWA', purpose: 'PWA 渐进式 Web 应用支持' }
      ],
      
      screenshots: [],
      
      achievements: [
        '✅ 界面简洁美观，用户学习成本极低',
        '✅ 性能优异，应用体积仅 100KB',
        '✅ 支持离线使用，可作为桌面应用'
      ]
    }
  },
  {
    id: 4,
    title: '数据可视化平台',
    description: '企业级数据可视化平台，提供丰富的图表组件和自定义配置，支持实时数据更新。',
    image: 'https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=800&h=450&fit=crop',
    tags: ['Vue 3', 'ECharts', 'WebSocket', 'TypeScript'],
    category: 'web',
    featured: true,
    demoUrl: 'https://dataviz.example.com',
    githubUrl: null,
    date: '2023-06',
    status: '已上线',
    teamSize: '8人',
    role: '前端技术负责人',
    duration: '4个月',
    details: {
      overview: `为企业提供强大的数据可视化解决方案，支持多种数据源和图表类型。
      平台采用组件化设计，用户可以通过拖拽方式快速搭建可视化大屏，
      支持实时数据推送、数据钻取、图表联动等高级功能。
      已服务于多家大型企业，用于生产监控、销售分析、运营决策等场景。`,
      
      challenges: [
        '大屏性能：同时渲染 20+ 个图表时的性能优化',
        '实时数据：高频数据更新不能影响用户交互',
        '自定义配置：需要提供灵活但易用的配置方式',
        '数据安全：企业数据的安全传输和存储'
      ],
      
      solutions: [
        '使用虚拟 DOM 和按需渲染，只更新可视区域的图表',
        '实现数据防抖和节流机制，合并高频更新请求',
        '设计直观的配置面板，支持代码和可视化两种配置方式',
        '采用 HTTPS + Token 认证，数据加密传输'
      ],
      
      features: [
        '📊 20+ 图表类型：柱状图、折线图、饼图、地图、仪表盘等',
        '🎨 拖拽式编辑：可视化搭建大屏，所见即所得',
        '⚡ 实时数据：WebSocket 推送，毫秒级更新',
        '🔗 数据联动：图表之间支持联动和钻取',
        '🎭 主题定制：支持自定义配色方案和主题',
        '📤 数据导出：支持图表导出为图片、PDF',
        '🔐 权限管理：细粒度的查看和编辑权限控制',
        '📱 响应式适配：自动适配不同分辨率的大屏'
      ],
      
      technologies: [
        { name: 'Vue 3', purpose: '前端框架，构建用户界面' },
        { name: 'TypeScript', purpose: '类型安全，提升代码质量' },
        { name: 'ECharts', purpose: '强大的图表库' },
        { name: 'D3.js', purpose: '自定义数据可视化' },
        { name: 'WebSocket', purpose: '实时数据推送' },
        { name: 'Canvas', purpose: '高性能渲染' }
      ],
      
      screenshots: [],
      
      achievements: [
        '✅ 成功服务 10+ 家大型企业，获得客户高度认可',
        '✅ 支持同时渲染 50+ 图表，性能优异',
        '✅ 实时数据延迟 < 100ms，满足监控需求',
        '✅ 可视化配置方式，降低使用门槛 80%'
      ]
    }
  },
  {
    id: 5,
    title: '在线协作工具',
    description: '支持多人实时协作的在线文档编辑工具，提供富文本编辑、评论、版本控制等功能。',
    image: 'https://images.unsplash.com/photo-1522071820081-009f0129c71c?w=800&h=450&fit=crop',
    tags: ['Vue 3', 'WebSocket', 'Quill', 'Node.js'],
    category: 'web',
    featured: false,
    demoUrl: null,
    githubUrl: 'https://github.com/yourusername/collab-tool',
    date: '2023-03',
    status: '开发中',
    teamSize: '6人',
    role: '前端开发工程师',
    duration: '进行中',
    details: {
      overview: `类似 Google Docs 的在线协作文档工具，支持多人实时编辑。
      实现了基于 OT（Operational Transformation）算法的协同编辑，
      确保多人同时编辑时的数据一致性。
      提供富文本编辑、评论批注、版本历史等完整功能，适用于团队文档协作场景。`,
      
      challenges: [
        '并发编辑：多人同时编辑同一位置的冲突解决',
        '数据同步：如何保证所有客户端的数据一致性',
        '性能优化：大文档的编辑性能优化',
        '离线编辑：网络断开后的离线编辑和同步'
      ],
      
      solutions: [
        '实现 OT（Operational Transformation）算法处理并发冲突',
        '使用 WebSocket 实现实时数据同步，结合增量更新减少传输量',
        '采用虚拟滚动和延迟渲染技术优化大文档性能',
        '实现本地缓存机制，网络恢复后自动同步'
      ],
      
      features: [
        '✍️ 富文本编辑：支持标题、列表、表格、图片等丰富格式',
        '👥 实时协作：多人同时编辑，实时查看其他人的光标位置',
        '💬 评论批注：支持对文档任意位置添加评论和批注',
        '📜 版本历史：自动保存编辑历史，支持回退到任意版本',
        '🔐 权限控制：所有者、编辑者、查看者三级权限',
        '📤 导出功能：支持导出为 PDF、Word、Markdown 格式',
        '🔍 全文搜索：快速查找文档内容',
        '📱 移动端适配：支持手机和平板编辑'
      ],
      
      technologies: [
        { name: 'Vue 3', purpose: '前端框架' },
        { name: 'Quill', purpose: '富文本编辑器' },
        { name: 'WebSocket', purpose: '实时通信' },
        { name: 'Node.js', purpose: '后端服务' },
        { name: 'MongoDB', purpose: '文档存储' },
        { name: 'OT.js', purpose: '协同编辑算法' }
      ],
      
      screenshots: [],
      
      achievements: [
        '✅ 成功实现 OT 算法，支持稳定的多人协作',
        '✅ 实时同步延迟 < 50ms，体验接近原生应用',
        '✅ 支持 100+ 人同时在线编辑同一文档'
      ]
    }
  },
  {
    id: 6,
    title: '个人作品集网站',
    description: '基于 Vue 3 构建的现代化个人作品集网站，采用响应式设计，支持深色模式和流畅动画。',
    image: 'https://images.unsplash.com/photo-1467232004584-a241de8bcf5d?w=800&h=450&fit=crop',
    tags: ['Vue 3', 'Element Plus', 'GSAP', 'SCSS'],
    category: 'web',
    featured: false,
    demoUrl: '#',
    githubUrl: 'https://github.com/yourusername/portfolio',
    date: '2024-10',
    status: '已上线',
    teamSize: '个人项目',
    role: '全栈开发',
    duration: '18天',
    details: {
      overview: `使用最新的前端技术栈打造的个人作品集网站，展示项目经历和技术能力。
      网站采用现代化的设计理念，注重用户体验和视觉效果。
      实现了响应式布局、深色模式、流畅动画等功能，
      并进行了全面的性能优化和 SEO 优化，确保在各种设备和搜索引擎中都有良好表现。`,
      
      challenges: [
        '动画性能：大量动画效果可能影响页面性能',
        '主题切换：深色/浅色模式的平滑过渡',
        '响应式适配：在各种屏幕尺寸下保持美观',
        'SEO 优化：单页应用的搜索引擎优化'
      ],
      
      solutions: [
        '使用 GSAP 库实现高性能动画，合理使用 will-change 属性',
        '通过 CSS 变量实现主题切换，配合过渡动画',
        '使用 Flexbox 和 Grid 布局，设置合理的断点',
        '添加完整的 meta 标签和结构化数据'
      ],
      
      features: [
        '🎨 现代化设计：简洁优雅的 UI 设计，注重细节',
        '📱 响应式布局：完美适配手机、平板、桌面设备',
        '🌗 深色模式：支持自动检测和手动切换主题',
        '✨ 流畅动画：使用 GSAP 实现页面滚动和元素动画',
        '🎯 项目展示：详细展示项目信息、技术栈、成就',
        '💼 技能展示：可视化展示技能等级和经验',
        '📧 联系表单：便捷的联系方式和表单功能',
        '🚀 性能优化：代码分割、懒加载、图片优化',
        '🔍 SEO 友好：完整的 SEO 优化，提升搜索排名'
      ],
      
      technologies: [
        { name: 'Vue 3', purpose: '前端框架，使用 Composition API' },
        { name: 'Element Plus', purpose: 'UI 组件库' },
        { name: 'GSAP', purpose: '高性能动画库' },
        { name: 'Pinia', purpose: '状态管理' },
        { name: 'Vue Router', purpose: '路由管理' },
        { name: 'Vite', purpose: '构建工具' },
        { name: 'SCSS', purpose: 'CSS 预处理器' }
      ],
      
      screenshots: [],
      
      achievements: [
        '✅ Lighthouse 性能评分 95+，SEO 评分 100',
        '✅ 首屏加载时间 < 1.5s，用户体验优秀',
        '✅ 完美支持各种设备和浏览器',
        '✅ 动画流畅，60fps 渲染性能'
      ]
    }
  }
]

// 项目分类
export const projectCategories = [
  { value: 'all', label: '全部' },
  { value: 'web', label: 'Web 应用' },
  { value: 'app', label: '移动应用' },
  { value: 'tool', label: '工具' },
  { value: 'other', label: '其他' }
]

